<template>
<div>
<home-header>
</home-header>
<home-swiper :list="swiperList">
</home-swiper>
<home-icons :list="iconList">
</home-icons>
<home-recommend :list="recommendList"></home-recommend>
<home-weekend :list="weekendList"></home-weekend>
</div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/recommend'
import HomeWeekend from './components/weekend'
import axios from 'axios'
import { mapState } from 'vuex'
export default{
  name: 'Home',
  components: {
	HomeHeader,
	HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data () {
	  return {
      lastcity: '',
		  swiperList: [],
		  iconList: [],
		  recommendList: [],
		  weekendList: []
	  }
  },
  computed: {
  ...mapState(['city'])
  },
  methods: {
	  getHomeInfo() {
	    axios.get('/api/index.json?city=' + this.city)
	    .then(this.getHomeInfoSucc)
	  },
	  getHomeInfoSucc(res) {
	  	res = res.data
	  	if (res.ret && res.data) {
	  		const data = res.data
			this.swiperList = data.swiperList
			this.iconList = data.iconList
			this.recommendList = data.recommendList
			this.weekendList = data.weekendList
	  	}
	  }
   },
  mounted () {
    this.lastcity = this.city
    this.getHomeInfo()
   },
   activated () {
     if (this.lastcity !== this.city){
       this.lastcity = this.city
       this.getHomeInfo()
     }
   }
  }
</script>

<style>
</style>
